<template>
  <div class="user-box">
    <header>
      <input type="text" v-model="getListQuery.name" placeholder="输入姓名" />
      <button @click="pickData(true)">
        <img src="../images/search.png" alt="" />
      </button>
    </header>
    <ul @scroll="scrollEvt">
      <li v-for="item in containerList" @click="pickUser(item)" :key="item.id">
        <span v-if="!(btnType === 'purchase')" class="project">
          {{ item.name }}
          <span>{{ item.id }}</span>
        </span>
        <span v-else class="purchase">
          {{ item.id }}
        </span>
      </li>
      <li class="more">
        {{
          loading ? "加载中..." : hasMore ? "上滑加载更多" : "不要滑了，没有了"
        }}
      </li>
    </ul>
  </div>
</template>
<script>
import { getPersonListApi, projectListApi } from "../apis/ProjectApi";
import {
  materialListApi,
  supplierListApi,
  purchaseListApi,
} from "../apis/PurchaseApi";
import { roleInfoApi } from "../apis/LoginApi";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    btnType: {
      type: String,
      require: true,
    },
  },

  // 因为是一个组件，所以需要在页面展开的时候，来执行数据调用方法
  watch: {
    value(val) {
      if (val) {
        this.pickPerson();
        this.itemShow = true;
      }
    },

    // 当弹出框关闭的时候，需要修改组件的props值
    itemShow(val) {
      if (!val) {
        this.$emit("input", false);
      }
    },
  },

  data() {
    return {
      itemShow: false,
      containerList: [],

      // 查询信息的查询对象
      getListQuery: {
        projectName: "",
        name: "",
        page: 1,
        size: 20,
      },
      // 分页需要这样几个条件: 再加载数据的时候，不能进行下一页数据；一定要滚动到底部；后端还有数据没有获取回来
      loading: false,
      hasMore: true,
    };
  },
  created() {
    this.pickData();
  },
  methods: {
    pickData(isQuery) {
      // 需要把查询条件重置为空
      this.getListQuery.page = 1;
      this.containerList = [];

      // 加载状态开启
      this.loading = true;
      // 发起数据请求
      this.getList();
      // 在执行查询的时候不能调用
      if (!isQuery) {
        this.getListQuery.name = "";
        this.itemShow = true;
      }
    },

    // getPersonList 获取用户数据的方法
    async getList() {
      let result;
      if (this.btnType === "project") {
        result = await projectListApi(this.getListQuery);
      } else if (this.btnType === "material") {
        result = await materialListApi(this.getListQuery);
      } else if (this.btnType === "supplier") {
        result = await supplierListApi(this.getListQuery);
      } else if (this.btnType === "person") {
        result = await getPersonListApi(this.getListQuery);
      } else if (this.btnType === "purchase") {
        result = await purchaseListApi(this.getListQuery);
      } else if (this.btnType === "register") {
        result = await roleInfoApi();
      } else {
        return;
      }
      if (result.code === 200) {
        this.containerList = this.containerList.concat(result.data.rows);
        // 计算是否还有数据没有从后端获取回来: 当前页面 * 每一页数据 一定要小于 总数据
        this.hasMore =
          this.getListQuery.page * this.getListQuery.size < result.data.total;
      }
      // 因为vue是虚拟dom，而虚拟dom更新和赋值是异步，所以再关闭加载状态时，需要延迟
      setTimeout(() => {
        this.loading = false;
      });
    },
    scrollEvt() {
      let target = window.event.target;
      // 计算是否已经滚动到底部：容器展示高度 + 已经滚动上去的距离 === 容器的真实高度
      let isBottom =
        target.clientHeight + target.scrollTop + 20 > target.scrollHeight;
      // 因为要做请求节流(第一次请求没有结束的情况下，不能发起第二次请求)，必须有更多数据，一定要滚动到底部的时候才能执行加载
      if (!this.loading && this.hasMore && isBottom) {
        // 开启节流阀门
        this.loading = true;
        this.getListQuery.page += 1;
        this.getList();
      }
    },
    // 选择具体的负责人 -- 因为我们是一个独立的组件，所以应该把数据传递出去给父组件
    pickUser(user) {
      this.itemShow = false;
      this.$emit("dataToEdit", user, this.itemShow);
    },
  },
};
</script>
